Day 01 - HTML 與 CSS 語法結構

18th鐵人賽 day 01 css html

饅頭

團隊第二屆技術創作市集

2026-08-20 12:46:51

317 瀏覽

分享至

大家好，我是饅頭，目前是一位網頁設計師，平常的工作除了使用 Figma 來繪製網頁介面外，也需要自己切切版、寫寫 CSS，不過最近幾年都直接用 AI 幫我速速切完了，要自己從 0 開始刻 CSS 的情況也已經很少了。

剛好去年參加了「第一屆 - 技術創作市集」這個活動，這個活動就是一群工程師聚在一起寫技術的本本，參加個鐵人賽，之後年底再順便印出來賣！所以我去年也努力寫了一本還算完整的 CSS 的同人本，很感謝去年有買我的實體書的大家！不過剛好去年我沒有順利參加到鐵人賽，想說今年就把這本 CSS 本本，整理成網路文章，再拿來參加比賽！今年「第二屆 - 技術創作市集」沒意外的話，應該也會再努力寫一本不一樣的書出來 www

講了那麼多！所以說，應該沒有人會想到在 2062 年，居然還有人在寫 CSS 教學吧？不過既然我都寫了，還是要拿來發一下！！！ψ(｀∇´)ψ

等等！先別急著走！雖然現在 AI 已經能切出很讚的網頁，但有的時候只要想微調個間距或對齊，卻不知道該怎麼自己微調。呼叫 AI 時，它又只會失控地爆改你的網頁。這時候，只要能看懂一點 CSS，那就能幫你拯救這些網頁了！剛好藉由這次鐵人賽的機會，能重新整理關於 CSS 的基本知識。

幫助大家在 AI 時代，就算是被它爆改網頁排版，也能自己親手爆改回來！如果你剛好也想要學習 CSS，或想跟著我一起重新複習，歡迎追蹤接下來 30 天的文章！ദ്ദി (⩌ᴗ⩌ )

準備環境

在開始學習 CSS 之前，我們需要準備一個適合的開發環境。
可以選擇喜歡的方式來學習開發 CSS～

桌面開發環境

下載 Visual Studio Code
- 前往 Visual Studio Code 官方網站（https://code.visualstudio.com/）
- 下載並安裝適合您作業系統的版本
建立專案資料夾
- 在桌面建立一個新資料夾，取一個自己喜歡的名字，例如：css-learning
- 在 VS Code 中點選「File」→「Open Folder」開啟此資料夾

建立檔案

建立 HTML 檔案

右鍵點選資料夾，選擇「New File」

命名為 index.html，輸入下方的 HTML 內容～

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 學習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>這是我的第一個網頁！</p>
</body>
</html>

建立 CSS 檔案
- 同樣新增檔案，命名為 style.css
- 輸入下方的 CSS 內容做測試
```
body {
    background-color: #f0f0f0;
}
p {
    color: #333;
}
```

安裝 Live Server 擴充套件
- 在 VS Code 中按下 Ctrl+Shift+X（Mac 為 Cmd+Shift+X）開啟擴充套件面板
- 搜尋「Live Server」並安裝
- 在 index.html 上右鍵選擇「Open with Live Server」，瀏覽器會自動開啟，並在你修改程式碼時即時更新頁面

當然編輯器也不一定要使用 Visual Studio Code，可以選擇使用自己熟悉的編輯器來學習。
如果想要在線上先練習，不想安裝環境，也可以試試看 codepen 這種線上編輯器服務！
以上都準備好之後，就可以開始學習 CSS 囉！！GOGO！！ (ﾉ>ω<)ﾉ

CSS 簡介

CSS 是一種用來描述 HTML 外觀的樣式表語言，必須與 HTML 搭配使用。如果說 HTML 是網頁的骨架，那麼 CSS 就是網頁的外衣。網頁中的視覺效果，包括文字顏色、背景圖片、版面配置、動畫等所有視覺元素，都可以由 CSS 來定義和管理。它可以讓原本只有結構的 HTML 文件變得美觀且具有視覺吸引力。

HTML 語法結構

在學習 CSS 之前，必須先了解 HTML 元素的基本組成，因為 CSS 選擇器正是透過這些元素特徵來選取並套用樣式的。

這些元素特徵包含：標籤名稱（如 div）、類別（如 container）和 ID（如 main)。在設定 CSS 樣式時，我們需要利用這些特徵來精準調整網頁的視覺呈現。
HTML 元素可以互相包裹，形成樹狀的層級結構。根據這些層級關係，我們會給予元素不同的稱呼來表示彼此之間的層級關係。以下方程式碼做範例，說明元素之間的關係：

<body>
  <div class="grandparent">
    <div class="parent">
      <p class="child">
        這是段落文字
        <span>這是更內層的文字</span>
      </p>
      <p class="child">這是另一個段落</p>
    </div>
  </div>
</body>

父元素與子元素：指相鄰上下層的包含關係。
- .parent 是 .child 的父元素
- .child 是 .parent 的子元素
- .child 段落 <p> 是內部 <span> 的父元素
祖先元素與後代元素：指跨越多層的包含關係。
- <body> 是所有元素的祖先元素（最外層）
- .grandparent 是 .parent、.child、<span> 的祖先元素
- .parent 是 .child、<span> 的祖先元素
- <span> 是 <body>、.grandparent、.parent、.child 的後代元素
兄弟元素：指擁有相同父元素的元素，又稱同層元素。
- 兩個 .child 元素互為同層元素，它們的父元素都是 .parent

這些層級關係在 CSS 中會大量使用，掌握這些概念將幫助你更靈活地運用 CSS。

CSS 語法結構

CSS 的中文名稱為「層疊樣式表」，實際上是由多個樣式「規則」堆疊組成。每個規則都包含「選擇器」與「屬性」兩個部分。

規則（Rule）：CSS 的基本單位，定義網頁元素的樣式外觀。每個規則告訴瀏覽器如何顯示特定的 HTML 元素。
選擇器（Selector）：指定要套用樣式的 HTML 元素。可以是元素標籤名稱（例如： p、h1）、類別 class 名稱（例如：.highlight）、ID（例如：#header）等，用來精確選取目標元素。
屬性（Property）：定義元素的具體樣式設定，如顏色、字體大小、邊距等。每個屬性都有對應的數值，用冒號分隔，並以分號結束。（例如：color: blue;、font-size: 16px;）
```
選擇器 { 
　屬性: 值; 
　屬性: 值; 
}
```
```
h1 { 
　color: blue; 
　font-size: 24px; 
}
.highlight { 
　color: #ff0000; 
}
```

如何連結 CSS 到 HTML

前面提到，CSS 必須與 HTML 搭配使用。在 HTML 中使用 CSS 主要有以下三種方法：

內聯樣式（Inline Style）：直接在 HTML 標籤中使用 style 屬性。
- 直接套用在 HTML 標籤上，無需額外編寫選擇器，但只能作用在單一元素上，且此樣式規則具有較高的優先級。
- 適合用於快速測試、調整特定元素樣式，也適用於HTML信件、電子報設計。在 JavaScript 中也常用於動態控制 UI 顯示，能有效覆蓋現有樣式。
- 由於 HTML 內容與 CSS 樣式混合在一起，降低了程式碼的可維護性，因此不適合在大型專案中大量使用。
```
<h1 style="color: red; font-size: 20px;">標題</h1>
```
內部樣式表（Internal Style Sheet）：在 HTML 文件的區域使用標籤。
- 與內聯樣式不同，內部樣式表雖然同樣寫在 HTML 檔案中，但有獨立的樣式區塊，且可作用於該 HTML 檔案中的所有元素。
- 適合用於單頁網站或特定頁面的樣式設定。
- 由於該樣式表只能作用於單一 HTML 檔案，無法被其他網頁檔案重複利用，因此在多頁網站中效率較低。
```
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
```
外部樣式表（External Style Sheet）：建立一個獨立的 CSS 文件，並在 HTML 中引用，使用使用標籤引入。
- 這是較常使用的方法，它將 CSS 樣式與 HTML 內容完全分離，放在獨立的 CSS 檔案中。
- 具有較好的可維護性與重複使用性，適合用於大型網站專案，讓多個 HTML 頁面共用相同的樣式設定。
- 由於此樣式表會同時作用於多個 HTML 檔案，所以檔案命名和管理需要謹慎處理。特別在大型專案中，良好的目錄結構和命名規範能有效避免混亂。
```
<head>
    <link rel="stylesheet" href="styles.css">
</head>
```

以上介紹的三種方法，可以依照自己需求靈活運用。
為了方便比較，將這三個方法整理成比較表：

項目	內聯樣式	內部樣式表	外部樣式表
定義方式	直接在 HTML 標籤中使用 style 屬性	在 HTML 文件的 `<style>` 標籤中使用	建立獨立的 CSS 文件用 `<link>` 標籤引入
樣式內容分離	HTML 和 CSS 混合	部分分離，在同一文件中	完全分離
優先度	最高	中等（依選擇器而定）	最低（依選擇器而定）
作用範圍	單一元素	單一 HTML 文件	多個 HTML 文件
重複使用	無法重複使用	限該文件內重複使用	可跨多文件重複使用
維護性	較難維護	較內聯樣式好一點	維護性最佳
適合用於	快速測試、信件、電子報、JavaScript 強制覆蓋樣式	單頁網站、頁面特定樣式、小型專案	多頁網站、大型專案、需要統一風格的網站